<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {$LOAD_STYLE.top|raw}
</head>
<style type="text/css">
.colorbox{
    margin: 0px;
    padding: 0px;
}
.colorbox .color-x{
    text-align: center;
    padding: 5px;
    margin: 0px;
    margin-bottom: 20px;
    border-right:2px #FFF solid;
}
.colorbox .colorval{
    height: 100px;
    margin: 0px;
	border-radius: 10px;
}
.colorbox .layui-input{
	text-align: center;
	padding-left: 0px;
}
.colorbox a button,.colorbox h5{
	line-height: 14px;
    color:#797979;
}
.colorbox h5,.colorbox p{
	margin-top: 10px;
	padding: 0px;
}
.colorbox .rose{
	margin-bottom: 8px;
}
.colorbox .rose input{
	width: 47%;
	display: inline;
}
.rosestyle{
	background-color: #E6F0FF;
	border: 1px solid #80B3FF;
}
.colorbox .ocolor1{
	color: #DDDDDD;
}
.colorbox .ocolor2{
	color: #CA1D3E;
}
.layui-form-item .layui-input-inline{
	width: 300px;
}
.layui-form-item .layui-input-inline input[type=text]{
	text-align: center;
}
.gray{
	background:-webkit-gradient(linear,0 0,0 100%,from(#999999),to(#ffffff));
}
</style>
	<body class="pear-container">			
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form layui-form-pane" action="">
					<div class="layui-form-item">
						<div class="layui-col-md7">
							<div class="layui-form-item layui-inline">
								<label class="layui-form-label">编号</label>
								<div class="layui-input-inline">
									<input type="text" name="number" placeholder="根据产品编号和色号查找" class="layui-input" focus-select>
								</div>
							</div>
						   <div class="layui-form-item layui-inline">
							   <label class="layui-form-label">色号</label>
							   <div class="layui-input-inline">
								   <input type="text" name="colorid" placeholder="根据产品编号和色号查找" class="layui-input">
							   </div>
						   </div>   
						   <div class="layui-form-item layui-inline">
							   <label class="layui-form-label">颜色参数</label>
							   <div class="layui-input-inline">
								   <input type="text" name="keyword" placeholder="潘通色号 / HEX编色号 (例如 : #FFFFFF)" class="layui-input">
							   </div>
						   </div>   
						   <div class="layui-form-item layui-inline">
							   <label class="layui-form-label">匹配值</label>
							   <div class="layui-input-inline">
								   <input type="text" name="range" placeholder="越小越接近，越小结果越少" class="layui-input" value="10">
							   </div>
						   </div>
						   <div class="layui-form-item layui-inline">
							   <label class="layui-form-label">筛选范围</label>
							   <div class="layui-input-inline">
								 <select name="tid">
									<option value=""></option>
									{volist name="type" id="v"}
									<option value="{$v.id}">{$v.name}</option>
									{/volist}
								 </select>
								</div>
						   </div>
						   
						   <div class="layui-form-item layui-inline">
							   <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="query">
								   <i class="layui-icon layui-icon-search"></i>
								   查询
							   </button>
							   <button type="reset" class="pear-btn pear-btn-md">
								   <i class="layui-icon layui-icon-refresh"></i>
								   重置
							   </button>
							</div>
						</div>
						
						<div class="layui-col-md5">
							<blockquote class="layui-elem-quote">
							<p>1.只查询接近的潘通颜色或者HEX颜色，则无需填写面料编号和色号</p>
							<p>2.如需查询接近主布的罗纹颜色，请填写编号和色号，筛选类型分类为罗纹</p>
							<p>3.颜色差值，每次加减为5个值，数值越大，筛选结果越多，色差越大</p>
							<p>4.搜索结果仅供参考，请以实际色卡颜色为准</p>
							</blockquote>
						</div>
					</div>
				</form>
			</div>
		</div>
		
		<div class="layui-card" id="box_content">		
		</div>
		

		<script type="text/html" id="tpl">
			<div class="layui-card-body">
				<div class="layui-row layui-col-space10 colorbox">		
					<div class="layui-col-md12" style="margin-top: 20px;margin-bottom: 30px;">
						<div class="layui-col-md2" style="background-color:{{ d.data.hex.ptHex }};height:140px;margin-right: 20px;">
						</div>
						<div class="layui-col-md9">
							<p>搜索结果</p>
							<p>共匹配到颜色：{{ d.data.count }}个</p>
							<p>HEX颜色：{{ d.data.hex.ptHex }}</p>
							<p>RGB颜色：{{ d.data.hex.ptRgb }}</p>
						</div>
					</div>
					{{#  layui.each(d.data.list, function(index, d){ }}
					<div class="layui-col-md2 layui-col-xs6 layui-col-sm6 color-x" data-index="{{ d.id }}">
						{{# if(d.gray==1){ }}
						<div class="layui-col-md12 layui-col-sm10 colorval gray"></div>
						{{# }else{ }}
						<div class="layui-col-md12 layui-col-sm10 colorval" style="background-color:#{{ d.val }}"></div>
						{{# } }}
						<div class="layui-col-md12 layui-col-sm2">
						  <h5>{{ d.onumber }} # {{ d.colorid }} ({{ d.name }})</h5>
						  <h5>{{ d.title }}</h5>
						  <h5>#{{ d.val }}</h5>
					   </div>
					</div>
					{{#  }); }}
				</div>
			</div>
		</script>
		
        <script>			
        layui.use(['table', 'form', 'jquery','common','laydate','mycomm'], function() {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let common = layui.common;
			let mycomm = layui.mycomm;
            let MODULE_PATH = "{$MODULE_PATH}";
			
			form.on('submit(query)', function(data) {
				if((data.field.number!="" && data.field.colorid!="") || data.field.keyword!=""){
					mycomm.table_tpl(MODULE_PATH+'find',data.field,tpl,'#box_content');
				}else{
					Alert('请输入编号和色号或者颜色值！','error',3);
				}
				return false;
			});
						
        })
    </script>
	{$LOAD_STYLE.bottom|raw}
	</body>
</html>
